<template>
    <div class="mui-numbox" data-numbox-min='1' :data-numbox-max="max">
        <button class="mui-btn mui-numbox-btn-minus" type="button">-</button>
        <input class="mui-numbox-input" type="number" value="1" ref="nobox" @change="countChanged"/>
        <button class="mui-btn mui-numbox-btn-plus" type="button">+</button>
    </div>
</template>

<script>
// 导入mui从而支持初始化数字框
import mui from '../../../lib/mui/js/mui.js'
export default {
    data(){
        return{}
    },
    methods:{
        countChanged() {
      // 获取选择的商品数量
        const val = this.$refs.nobox.value;
      // 每当 nobox 子组件中的 count 变化之后，要立即把 最新的数量值，传递给goodsinfo父组件， 这样，每当我们点击 【加入购物车】按钮时候，就能立即把 最新的 count 值，同步到 购物车的徽标中
      // 这样就涉及到了父子组件传值，子组件向父组件传递数据
        this.$emit("func", parseInt(val));
    }

    },
    mounted(){
        mui(".mui-numbox").numbox()
    },
    props:["max"],
    watch:{
        // 监听单个的虚拟的数据
        // 不管你传递的是什么数值，最后肯定是一个合法的数值
        max:function(newval){
            // 每当监听到max值的改变，无论这个值是否合法，我们都为这个数字框重新赋值
            mui(".mui-numbox").numbox().setOption('max',newval)
        }
    }
}
</script>

<style lang="scss" scoped>

</style>